<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/formatTime.js"></script>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">

</head>
<body>
<table id="info" border="1px" align="center" width="70%">
    <tr>
        <td width="10%">id</td>
        <td width="30%">用户名</td>
        <td width="30%">出生日期</td>
        <td colspan="2" width="30%">操作</td>
    </tr>
</table>
<a href="userAdd.html">添加</a>
<script type="text/javascript">
    //使用jQuery完成
    $(document).ready(function(){
            //jQuery.ajax({})方法完成异步请求
            $.ajax({
                url: "../../../user/user", //请求路径urlPattern
                dataType: "json",
                type: "get",
                success: function(json){
                    for (let i = 0; i < json.length; i++) {
                        $(
                            "<tr>"+
                            "<td>"+json[i].id+"</td>" +
                            "<td>"+json[i].username+"</td>" +
                            "<td>"+timestampToDate(json[i].birth)+"</td>" +

                            "<td><button type='button' data-id='"+json[i].id+"' data-name='"+json[i].username+"' data-birth='"+timestampToDate(json[i].birth)+"' data-toggle='modal' data-target='#myModal'>"+"修改</button></td>>"+
                            // "<td><a href='"+i+"'>修改</a></td>" +
                            "<td><button id='delete' onclick='del("+json[i].id+")'>删除</button></td>" +
                            "</tr>"
                        ).appendTo("#info");
                    }
                }
            });
    });
</script>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body">
                <form action="" method="post">
                    <table border="1px" align="center" width="70%">
                        <tr>
                            <td width="20%">id</td>
                            <td width="50%">用户名</td>
                            <td width="50%">出生年月日</td>
                        </tr>
                        <tr>
                            <td width="20%"><span id="modal_id" name=""></span></td>
                            <input id="id" type="hidden" name="modal_id"/>
                            <td width="50%"><input type="text" id="modal_name" name="modal_name"></td>
                            <td width="50%"><input type="date" id="modal_birth" name="modal_birth"></td>
                        </tr>
                    </table>
                    <button id="modal_submit" name="submit" type="button">更新</button>
                </form>
                <script type="text/javascript">
                    // 提交更新
                    $("#modal_submit").click(function(){
                        $.ajax({
                            url: "../../../user/update", //请求路径urlPattern
                            dataType: "text",
                            type: "post",
                            data: {
                                id: $("#modal_id").text(),
                                username: $("#modal_name").val(),
                                birth: $("#modal_birth").val() + " 00:00:00"
                            },
                            success: function(){
                                window.location.href="userList.html"
                            }
                        });
                    });
                    function del(id) {
                        if (confirm("你确定删除吗")) {
                            // window.location.href = "../../../user/delete?id="+id
                            $.ajax({
                                url: "../../../user/delete", //请求路径urlPattern
                                dataType: "text",
                                type: "post",
                                data: {
                                    id: id,
                                },
                                success: function(){
                                    window.location.href="userList.html"
                                }
                            });
                        }
                    }

                </script>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script type="text/javascript">
    /* 将页面中的数据传给模态框 */
    $('#myModal').on('shown.bs.modal', function (event) {
        let btn = $(event.relatedTarget); //触发事件的按钮
        let modal = $(this);  //当前模态框
        let id = btn.data('id');
        let name = btn.data('name');
        let birth = btn.data('birth');
        $('#modal_id').text(id);
        $('#modal_name').val(name);
        $('#modal_birth').val(birth);
        /* 在input隐藏域中传递id */
        $('#id').val(id)
    });
</script>


</body>
</html>